<template>
	<view class="top-box fixed clearfix bai">
		
		<view class="left clearfix child-left">
			<view class="left clearfix child-back" @click="navigateBack()" title="返回上一步">
				<uni-icons type="left" size="16" color="#777"></uni-icons>
			</view>
			
			<view class="left clearfix child-title ellipsis">
				{{title}}
			</view>
		</view>
		
		<view class="top-right right clearfix">
			<view class="top-login right" v-if="!userinfo || !userinfo._id" @click="showLogin=true">
				登录
			</view>
			
			<view class="top-userinfo-image right relative" @mouseenter="showLoginMenu = true" @mouseleave="showLoginMenu = false" v-else>
				<image :src="userinfo.avatar||'https://mp-2298d5e4-aa54-4efc-a8b7-bbb75295a007.cdn.bspapp.com/ai-header/10.webp'"></image>
				<view class="top-userinfo-menu left clearfix absolute" v-if="showLoginMenu == true">
					<view class="top-userinfo-top absolute">
						<uni-icons type="icon-shaixuan-shangjiantou" custom-prefix="iconfont" size="50" color="#fff"></uni-icons>
					</view>
					
					<view class="top-userinfo-images left clearfix">
						<view class="top-userinfo-img left clearfix">
							<image :src="userinfo.avatar||'https://mp-2298d5e4-aa54-4efc-a8b7-bbb75295a007.cdn.bspapp.com/ai-header/10.webp'"></image>
						</view>
						<view class="top-userinfo-texts left clearfix">
							<view class="ellipsis">{{userinfo.nickname}}</view>
							<view class="ellipsis">{{userinfo._id}} <uni-icons type="icon-fuzhi_o" style="margin-left:10px;cursor:pointer;" title="复制" custom-prefix="iconfont" size="18" color="#999"></uni-icons></view>
						</view>
						
						<view class="top-price-box left clearfix">
							<view class="top-price-number left clearfix">
								<text>魔豆余额</text>
								<text>{{userinfo.dou}}</text>
							</view>
							<view class="top-price-submit right clearfix" @click="alertPay()">
								<view>充值</view>
							</view>
						</view>
						
						
						<view class="top-items left clearfix" style="margin-top:30px;" @click="navigateTo('/pages/works/works')">
							<label>
								<uni-icons type="icon-yingyong7" custom-prefix="iconfont" size="16" color="#666"></uni-icons>
							</label>
							<label>我的作品</label>
						</view>
						
						<view class="top-items left clearfix">
							<label>
								<uni-icons type="icon-shiyongtiaokuan" custom-prefix="iconfont" size="16" color="#666"></uni-icons>
							</label>
							<label>我的订单</label>
						</view>
						
						
						<view class="top-items left clearfix">
							<label>
								<uni-icons type="icon-wode5" custom-prefix="iconfont" size="16" color="#666"></uni-icons>
							</label>
							<label>账号设置</label>
						</view>
						
						<view class="top-items left clearfix" style="border-bottom:none;" @click="loginOut()">
							<label>
								<uni-icons type="icon-tuichudenglu3" custom-prefix="iconfont" size="16" color="#666"></uni-icons>
							</label>
							<label>退出登录</label>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
		<!--登录插件-->
		<login :show="showLogin" @confirm="setUserinfo" @close="closeLogin"></login>
		<zmt-deposit-money :userinfo="userinfo" @close="setCloseMoney" :show="showMoney"></zmt-deposit-money>
	</view>
</template>
<style scoped>
	.child-title{color: #303540;font-size: 15px;font-weight: 500;max-width: 500px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height:60px;margin-left:10px;width:calc(100% - 50px);}
	.child-back{width:25px;height:32px;padding-left:7px;cursor:pointer;line-height:32px;background:#fff;border-radius: 8px;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .05);margin-top:14px;}
	.child-left{width:500px;height:60px;margin-left:30px;}
	.top-items label{margin-right:15px;}
	.top-items:hover{color:#999;cursor: pointer;}
	.top-items{width:70%;margin-left:15%;line-height:47px;border-bottom:1px solid #efefef;font-size:14px;color:#666;text-align: center;cursor:pointer;}
	.top-price-submit view{padding-left:15px;padding-right:15px;line-height:35px;height:35px;text-align: center;color:#fff;background:#2979ff;border-radius: 5px;margin-top:10px;margin-left:20px;font-size:13px;float:left;cursor:pointer;}
	.top-price-submit{width:40%;height:50px;line-height:50px;margin-top:10px;}
	.top-price-number text:last-child{font-size:18px;font-weight:bold;}
	.top-price-number text:first-child{font-size:14px;color:#666;}
	.top-price-number text{line-height:25px;text-align: center;float:left;text-align:center;width:100%;}
	.top-price-number{width:50%;height:50px;margin:10px;}
	.top-price-box{width:90%;height:68px;margin-left:5%;margin-top:30px;background-image: linear-gradient(75deg, #d9e5f2, #f0f7fe);border-radius: 8px;}
	.top-userinfo-texts view:last-child{font-size:13px;color:#999;}
	.top-userinfo-texts view:first-child{font-size:14px;font-weight:500;color:#333;}
	.top-userinfo-texts view{float:left;width:100%;line-height:20px;height:20px;}
	.top-userinfo-texts{width:calc(100% - 70px);height:40px;line-height:40px;margin:5px;}
	.top-userinfo-img image{width:40px;height:40px;border-radius: 50%;}
	.top-userinfo-img{width:40px;height:40px;border-radius: 50%;border:1px solid #eee;margin:5px;}
	.top-userinfo-images{width:90%;margin-left:5%;margin-top:20px;height:50px;}
	.top-userinfo-top{width:30px;height:30px;right:10px;top:-27px;}
	.top-userinfo-menu{width:300px;height:400px;background:#fff;z-index:99999;top:50px;right:0px;border-radius: 15px;box-shadow: 0 4px 12px 0 rgba(36, 104, 242, .08);}
	.top-userinfo-image image{width:40px;height:40px;border-radius: 50%;cursor:pointer;}
	.top-userinfo-image{width:40px;height:40px;margin:10px;border:1px solid #eee;border-radius: 50%;margin-right:35px;}
	.top-login{height:22px;padding:5px 25px;background:#2979ff;text-align: center;color:#fff;border-radius: 10px;line-height:22px;margin-top:13px;margin-right:30px;font-size:14px;cursor:pointer;}
	.top-right{width:200px;height:60px;}
	.top-box{width:100%;height:60px;left:0;right:0;top:0;z-index:9999;min-width:1380px;}
</style>

<script>
	export default {
		name:"top",
		data() {
			return {
				showLogin:false,
				userinfo:null,
				showLoginMenu:false,
				showMoney:false
			};
		},
		props:['title','page'],
		mounted() {
			var that = this;
			uni.getStorage({
				key:'login-userinfo',
				success:function(e){
					that.userinfo = e.data;
				}
			})
		},
		methods:{
			//弹出支付
			alertPay(){
				this.showMoney = true;
				this.showLoginMenu = false;
			},
			//关闭支付弹窗
			setCloseMoney(){
				this.showMoney = false;
			},
			//返回上一步
			navigateBack(){
				uni.navigateTo({
					url:this.page
				})
			},
			//跳转页面
			navigateTo(item){
				uni.navigateTo({
					url: item
				});
			},
			//退出登录
			loginOut(){
				var that = this;
				uni.removeStorage({
					key:'login-userinfo',
					success:function(){
						uni.showToast({
							title:'退出成功',
							icon:'none'
						})
						that.userinfo = null;
						location.reload();
					}
				})
			},
			//登录成功以后获取用户信息
			setUserinfo(e){
				this.showLoginMenu = false;
				this.userinfo = e;
			},
			//关闭登录弹窗更新状态
			closeLogin(e){
				this.showLogin = e;
			}
		}
	}
</script>